<template>
    <el-row :gutter="20">
        <el-col :span="12" :offset="0">
            <el-card shadow="always" :body-style="{ padding: '20px' }" v-loading="loading1">
                <!-- card body -->
                <el-form :model="siteInfo" ref="form"  label-width="80px" :inline="false" size="medium">
                    <el-form-item label="网站域名">
                        <el-input v-model="siteInfo.host"></el-input>
                    </el-form-item>
                    <el-form-item label="网站标题">
                        <el-input type="text" v-model="siteInfo.title"></el-input>
                    </el-form-item>
                    <el-form-item label="网站描述">
                        <el-input type="textarea" v-model="siteInfo.descript"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="editBaseInfo">确定</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-col>
        <el-col :span="12" :offset="0">
            <el-card shadow="always" :body-style="{ padding: '20px' }" v-loading="loading2">
                <template #header>
                    关键词添加(点击删除)
                </template>
                <!-- card body -->
                <div v-for="(item, index) in kw" :key="item.id" class="kw-box" @click="spliceKw(item.id, index)" :style="'background-color:' + item.color ">
                    {{item.value}}
                </div>
                <div class="kw-box" @click="dialogFormVisible = true">
                    <i class="el-icon-plus"></i>
                </div>
            </el-card>
            <el-dialog title="添加关键词" v-model="dialogFormVisible">
                <el-form :model="addKwForm">
                    <el-form-item label="关键词" label-width="80px">
                    <el-input v-model="addKwForm.value" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addKw">确 定</el-button>
                    </span>
                </template>
            </el-dialog>
        </el-col>
    </el-row>
    
        

    
</template>

<script>
import axios from 'axios'
export default {
    name: 'SiteInfo',
    data(){
        return {
            loading1: false,
            loading2: false,
            siteInfo: {
                host: '',
                title: '',
                descript: '',
                kw: [],
            },
            dialogFormVisible: false,
            addKwForm: {
                value: ''
            },
            kw: [
                {
                    value: 'NULL'
                }
            ],
        }
    },
    methods:{
        async spliceKw(id, index){
            this.loading2 = true;
            await axios.post('http://localhost/api/siteinfo/delKw',{
                id: id
            })
            .then(res => {
                console.log(res)
            })
            .catch(err => {
                console.error(err); 
            })
            this.loading2 = false;
            this.kw.splice(index, 1)
        },
        async addKw(){
            this.dialogFormVisible = false
            this.loading2 = true
            let data = await axios.post('http://localhost/api/siteinfo/addkw',{
                value: this.addKwForm.value
            })
            .then(res => res.data)
            .catch(err => {
                console.error(err); 
            })
            this.loading2 = false
            let r = parseInt(Math.random()*255,10)+1;
            let g = parseInt(Math.random()*255,10)+1;
            let b = parseInt(Math.random()*255,10)+1;
            data.kw.color = `rgba(${r}, ${g}, ${b}, 0.6)`;
            this.kw.push(data.kw);
        },
        async editBaseInfo(){
            this.loading1 = true
            await axios.post('http://localhost/api/siteinfo/baseinfo',{
                host: this.siteInfo.host,
                title: this.siteInfo.title,
                descript: this.siteInfo.descript,
            })
            .then(res => {
                console.log(res)
            })
            .catch(err => {
                console.error(err); 
            })
            this.loading1 = false
        }
    },
    async mounted(){
        this.loading1 = true;
        this.loading2 = true;
        let data = await axios.get('http://localhost/api/siteinfo')
        .then(res => res.data)
        .catch(err => {
            console.error(err); 
        })
        this.loading1 = false;
        this.siteInfo = data;
        this.siteInfo.kw.forEach(item=>{
            let r = parseInt(Math.random()*255,10)+1;
            let g = parseInt(Math.random()*255,10)+1;
            let b = parseInt(Math.random()*255,10)+1;
            item.color = `rgba(${r}, ${g}, ${b}, 0.6)`;
        })
        this.kw = this.siteInfo.kw
        this.loading2 = false;
        console.log(data)
    }
}
</script>

<style lang="scss" scoped>
.kw-box {
    display: inline-block;
    margin: 20px;
    width: 100px;
    height: 30px;
    border-radius: 4px;
    padding: 10px;
    text-align: center;
    line-height: 30px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    &:hover{
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.8);
        background-color: #f9f9f9;
        cursor: pointer;
    }
}
</style>>